<template>
    <div class="navlink">
       
        <router-link 
           
            active-class="active" 
            v-for="(link,index) in newRoutes" 
            :key="index"  
            :to="link.path"
        >
            {{ link.meta.title }}
        </router-link>
      
    </div>
</template>

<script>
    export default {
        name:"NavLink",
        computed:{
            newRoutes(){
                return this.$router.options.routes.filter(item =>{
                    if(!item.meta.isHidden){
                        return item;
                    }
                })
               
            }
        }
    }
</script>

<style scoped>
.navlink a{
    margin: 0 20px;
    font-size: 30px;
}

.active{
    color: red;
    background: rgb(209, 203, 187);
}
</style>